<script setup lang="ts">
import { getMemberOrderAPI } from '../services/constants'
import { putMemberOrderReceiptByIdAPI } from '@/services/order'
import type { OrderItem, OrderListParams } from '@/types/constants.d.ts'
import { onMounted, ref } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 定义 porps
const props = defineProps<{
  orderState: number
}>()
 enum OrderState {
  /** 待付款 */
  DaiFuKuan = 1,
  /** 待发货 */
  DaiFaHuo = 2,
  /** 待收货 */
  DaiShouHuo = 3,
  /** 待评价 */
  DaiPingJia = 4,
  /** 已完成 */
  YiWanCheng = 5,
  /** 已取消 */
  YiQuXiao = 6,
}
const orderStateList = [
  { id: 0, text: '' },
  { id: 1, text: '待付款' },
  { id: 2, text: '待发货' },
  { id: 3, text: '待收货' },
  { id: 4, text: '待评价' },
  { id: 5, text: '已完成' },
  { id: 6, text: '已取消' },
]
// 请求参数
const queryParams: OrderListParams = {
  page: 1,
  pageSize: 5,
  orderState:props.orderState,
}
//去支付
const gopay=(id:any)=>{
   uni.navigateTo({ url: `/pagesOrder/detail/detail?id=${id}` })
}
const ID=ref<string>('')
//确认收货
const receipt=async(id:string)=>{
   if(id==ID.value){
     return uni.showToast({ icon: 'none', title: '请勿重复收货' })
   }
   await putMemberOrderReceiptByIdAPI(id)
    uni.showToast({ title: '收货成功' })
    getMemberOrderData()
    ID.value=id
}
// 获取订单列表
const orderList = ref<OrderItem[]>([])
const getMemberOrderData = async () => {
  const res = await getMemberOrderAPI(queryParams)
  orderList.value = res.result.items
  console.log(orderList.value[0].skus)
}

onMounted(() => {
  getMemberOrderData()
})
</script>

<template>
  <scroll-view scroll-y class="orders">
    <view class="card" v-for="order in orderList" :key="order.id">
      <!-- 订单信息 -->
      <view class="status">
        <text class="date">{{ order.createTime }}</text>
        <!-- 订单状态文字 -->
        <text>{{ orderStateList[order.orderState].text }}</text>
        <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
        <text v-if="order.orderState >= 4" class="icon-delete"></text>
      </view>
      <view  v-for="item in order.skus"
           :key="item.id">
      <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
         <navigator
           class="goods"
           :url="`/pagesOrder/detail/detail?id=${order.id}`"
           hover-class="none"
         >
           <view class="cover">
             <image mode="aspectFit" :src="item.image"></image>
           </view>
           <view class="meta">
             <view class="name ellipsis">{{ item.name }}</view>
             <view class="type">{{ item.attrsText }}</view>
           </view>
         </navigator>
         <!-- 支付信息 -->
         <view class="payment">
           <text class="quantity">共{{ order.totalNum }}件商品</text>
           <text>实付</text>
           <text class="amount"> <text class="symbol">¥</text>{{ order.payMoney }}</text>
         </view>
           <!-- 订单操作按钮 -->
           <view class="action">
             <!-- 待付款状态：显示去支付按钮 -->
             <template v-if="order.orderState === OrderState.DaiFuKuan">
               <view class="button primary" @click="gopay(order.id)">去支付</view>
             </template>
             <template v-else>
               <navigator
                 class="button secondary"
                 :url="`/pages/Pay/Pay?skuId=${item.spuId}&count=${item.quantity}`"
                 hover-class="none"
               >
                 再次购买
               </navigator>
               <!-- 待收货状态: 展示确认收货 -->
               <view v-if="order.orderState === OrderState.DaiShouHuo" class="button primary"
               @click="receipt(order.id)"
                 >确认收货</view
               >
             </template>
           </view>
        </view>
    </view>
    <!-- 底部提示文字 -->
    <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
      {{ orderList.length>0 ? '没有更多数据~' : '正在加载...' }}
    </view>
  </scroll-view>
</template>
